<template>

	<div>
		<hr>
		<h3>全部人员列表</h3>
		<table>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
			<tr v-for="(user,index) in userList">
				<td>{{user.userId}}</td>
				<td>{{user.userName}}</td>
				<td>{{user.userAge}}</td>
				<td>{{user.gender}}</td>
			</tr>
		</table>
		<hr>
		<h3>人员列表（女士）</h3>
		<table>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
			<tr v-for="(user,index) in fuserList">
				<td>{{user.userId}}</td>
				<td>{{user.userName}}</td>
				<td>{{user.userAge}}</td>
				<td>{{user.gender}}</td>
			</tr>
		</table>
		<hr>
		<h3>人员列表（男士）</h3>
		<table>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
			<tr v-for="(user,index) in muserList">
				<td>{{user.userId}}</td>
				<td>{{user.userName}}</td>
				<td>{{user.userAge}}</td>
				<td>{{user.gender}}</td>
		
			
			</tr>
		</table>
		
	</div>
	
	
</template>

<script>
	export default{
		name:'MyComputed',
		data(){
			return {
				userList:[
					{userId:'1',userName:'admin',userAge:90,gender:'男'},
					{userId:'2',userName:'root',userAge:90,gender:'男'},
					{userId:'3',userName:'abc',userAge:90,gender:'女'},
					{userId:'4',userName:'admin',userAge:90,gender:'男'},
					{userId:'5',userName:'admin',userAge:9,gender:'女'},
					{userId:'6',userName:'admin',userAge:90,gender:'男'},
				]	
			}
		},
		computed:{
			
			//计算属性
			fuserList(){
				let arr = [];
				
				this.userList.forEach((item,index)=>{
					if(item.gender === '女'){
						arr.push(item)
					}
				})
				
				
				return arr
			},
			//计算属性
			muserList(){
				let arr = [];
				
				this.userList.forEach((item,index)=>{
					if(item.gender === '男'){
						arr.push(item)
					}
				})
				
				
				return arr
			}
		}
	}
	
	
</script>

<style scoped>
	
	table{
			width: 100%;
			border-collapse: collapse;
		}
		table tr th,table tr td{
			height: 35px;
			border-bottom: solid 1px #999;
			text-align: center;
		}
		.clear-btn{
			text-align: right;
		}
	
</style>